<script>
// import Home from './views/myproj/Home.vue'
// import Search from './views/myproj/Search.vue'
// import Profile from './views/myproj/Profile.vue'
export default {
  components: {
    // Home,
    // Search,
    // Profile
  },

  data() {
    return {
      componentId: 'Search'
    }
  },

  methods: {
    nav(comp) {
      this.componentId = comp
    }
  },

  mounted() {
    // console.log(this.$route)
  }
}
</script>

<template>
  <div class="container">
    <main>
      <!-- <Home></Home> -->
      <!-- <Search></Search> -->
      <!-- <component :is="componentId"></component> -->
      <router-view></router-view>
      <router-view name="comp1"></router-view>
      <router-view name="comp2"></router-view>
      <router-view name="comp3"></router-view>
    </main>
    <ul>
      <!-- <li @click="nav('Home')">首页</li>
      <li @click="nav('Search')">搜索</li>
      <li @click="nav('Profile')">我的</li> -->

      <router-link to="/index/home/001" custom v-slot="{ navigate, isActive, route}">
        <li @click="navigate" :class="{active: $route.fullPath.includes('/index/home')}">首页</li>
      </router-link>
      <router-link to="/index/search" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="{active: isActive}">搜索</li>
      </router-link>
      <router-link to="/index/profile" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="{active: isActive}">我的</li>
      </router-link>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  main {
    flex: 1
  }
  ul {
    height: 50px;
    display: flex;
    border-top: 1px solid #eee;
    li {
      flex: 1;
      line-height: 50px;
      text-align: center;
      &.active {
        background: aliceblue;
      }
    }
  }
}
</style>
